<template>
	<div class="tmpl">
		<navBarVue title="商品详情"></navBarVue>
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<!--轮播-->
					<swipeVue url="BannerServlet"></swipeVue>
				</div>
			</div>
		</div>
		<h3 v-text="goods.title" class="mui-content-padded"></h3>
		<hr class="mui-content-padded" />
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>
						市场价:<span style="text-decoration:line-through">{{goods.prePrice}}元</span> &nbsp;&nbsp;&nbsp;&nbsp; 销售价:
						<span style="text-decoration:none;color: red;font-size: x-large;">{{goods.salePrice}}元</span>
					</p>
					<div style="font-size: 14px;margin-top: 0;margin-bottom: 10px;color: #8f8f94;">
						购买数量：
						<div class="mui-numbox" style="display: inline-block;height: 30px;">
							<button class="mui-btn mui-btn-numbox-minus" type="button" @click="minNum">-</button>
							<input class="mui-input-numbox" type="number" value="1" v-model="goods.buyNum">
							<button class="mui-btn mui-btn-numbox-plus" type="button" @click="addNum">+</button>
						</div>
					</div>
					<div class="mui-btn mui-btn-primary">
						立即购买
					</div>
					<button type="button" class="mui-btn mui-btn-danger" @click="addShopCart">
						加入购物车
					</button>
				</div>
			</div>
		</div>
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>商品参数</p>
					<p>商品货号:{{goods.type}}</p>
					<p>产地:{{goods.address}}</p>
					<p>库存:{{goods.num}}</p>
				</div>
			</div>
		</div>

		<div class="mui-content-padded">
			<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined">图文介绍</button>
			<button type="button" class="mui-btn mui-btn-danger mui-btn-block mui-btn-outlined" @click="goodsComment">商品评论</button>
		</div>
		<br />

		<transition name="ball" v-on:after-enter="afterEnter">
			<div style="width: 30px; height: 30px; border-radius: 100px; 
								background-color: red; position: absolute; left: 200px; top: 500px;" v-if="showBall"></div>
		</transition>
	</div>
</template>

<script>
	import connect from '../common/connect.js';
	import ProdTools from '../common/prodTools.js';
	
	export default {
		data() {
			return {
				showBall: false,
				goods: {
					buyNum: 1,
				}
			}
		},
		methods: {
			addNum() {
				this.goods.buyNum = this.goods.buyNum + 1;
			},
			minNum() {
				this.goods.buyNum = this.goods.buyNum - 1;
				if(this.goods.buyNum < 1) {
					this.goods.buyNum = 1;
				}
			},
			addShopCart() {
				console.log("send:" + this.goods.buyNum)
				this.showBall = true;
				connect.$emit("addShopCart", this.goods.buyNum);
				ProdTools.addOrUpdate(
					{
						id: this.$route.query.id,
						num : this.goods.buyNum
					}
				);
				
//				console.log(ProdTools.getProds())
			},
			afterEnter: function(el) {
				// ...
				this.showBall = false;
			},
			goodsComment(){
				this.$router.push({
					name : 'goods.comment',
					query :{
						id : this.$route.query.id
					}
				});
			}
		},
		created() {
			console.log(this.$route.query.id)
			var goods = {
				title: '超级笔记本',
				salePrice: '100',
				prePrice: '120',
				num: 120,
				type: 'T0001',
				address: '常州',
				buyNum: 1
			}
			this.goods = goods;
		}
	}
</script>

<style scoped>
	.ball-enter-active {
		animation: bounce-in .5s;
	}
	
	@keyframes bounce-in {
		0% {
			transform: translate3d(0, 0, 0);
		}
		20% {
			transform: translate3d(30px, -30px, 0);
		}
		50% {
			transform: translate3d(50px, -30px, 0);
		}
		60% {
			transform: translate3d(50px, 0px, 0);
		}
		75% {
			transform: translate3d(30px, 80px, 0);
		}
		100% {
			transform: translate3d(20px, 800px, 0);
		}
	}
</style>